<template>
  <div class="home-content">
    <el-container style="width: 100%;height: 100%">
      <el-header class="system-header">
        <h2 style="color: #ffffff;letter-spacing: 1px">欢迎进入儿童呼吸GPT管理平台</h2>
        <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link" style="color: #ffffff">
        {{ userInfo.realName }}, 你好<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span @click="dialogVisible=true">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item command="quitLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container style="height: 100%">
        <el-aside width="200px" style="height: 100%">
          <el-menu :default-active="activerouter"
                   :router="true"
                   class="el-menu-vertical-demo"
                   background-color="#fff"
                   text-color="#303133"
                   active-text-color="#409EFF"
          >
            <el-menu-item :index="item.path" v-for="item in routerList" :key="item.id"
                          v-if="item.childList.length===0">
              <i :class="item.iconName"></i>
              <span slot="title" style="box-shadow: 0 0 20rpx 10rpx gainsboro;">{{ item.name }}</span>
            </el-menu-item>


            <el-submenu :index="item.iconName" v-for="item in routerList" :key="item.id"
                        v-if="item.childList.length>0">
              <template slot="title">
                <i :class="item.iconName"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="item2.path" v-for="item2 in item.childList" :key="item2.id">
                  {{ item2.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog
        title="修改密码"
        close-on-press-escape
        :before-close="closeBefore"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="oldPass">
          <el-input type="password" v-model="ruleForm.oldPassword" placeholder="请输入旧密码"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm.newPassword" placeholder="请输入新密码"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkNewPass" placeholder="请再次输入新密码"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="buttonClass">
<!--        <el-button @click="closeBefore">取 消</el-button>-->
        <el-button type="primary" @click="updatePass">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      dialogVisible:false,
      ruleForm: {
        userId: null,
        checkNewPass: "",
        oldPassword: "",
        newPassword: ""
      },
      routerList: [],
      userInfo:{},
      activerouter:''
    }
  },
  mounted() {
    this.activerouter = window.location.pathname.replace('/','');
  },
  created() {
    this.getMenuList()
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
  },
  methods: {
    updatePass() {
      if (this.ruleForm.oldPassword === "" || this.ruleForm.oldPassword == null) {
        this.$message.warning("请输入旧密码!");
        return;
      }
      if (this.ruleForm.oldPassword.length < 6 || this.ruleForm.oldPassword.length > 12) {
        this.$message.warning("旧密码长度6-12位!");
        return;
      }
      if (this.ruleForm.newPassword === "" || this.ruleForm.newPassword == null) {
        this.$message.warning("请输入新密码!");
        return;
      }
      if (this.ruleForm.newPassword.length < 6 || this.ruleForm.newPassword.length > 12) {
        this.$message.warning("新密码长度6-12位!");
        return;
      }
      if (this.ruleForm.newPassword !== this.ruleForm.checkNewPass) {
        this.$message.warning("两次输入密码不一致!");
        return;
      }
      let obj = {
        oldPassword: this.ruleForm.oldPassword,
        newPassword: this.ruleForm.newPassword
      }
      this.axios.post("/admin-user/updatePass", obj).then(resp => {
        if (resp.data.code === 200) {
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
          //this.ruleForm = {};
          //this.dialogVisible = false;
          //清空，重新登录
          sessionStorage.clear();
          this.$router.replace("/");
        }

      })
    },
    closeBefore(done) {
      this.ruleForm = {};
      done();
    },
    //获取当前用户的菜单
    getMenuList() {
      this.axios.post('/user/getMenuList').then(res => {
        if (res.data.code === 200) {
          this.routerList = res.data.data
        }
      })
    },
    handleCommand(command) {
      console.log(command)
      if (command === 'quitLogin') {
        this.$confirm('确定退出系统吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post('/user/logout').then(res => {
            if (res.data.code === 200) {
              sessionStorage.clear()
              this.$router.replace('/')
              this.$message.success('注销成功')
            }
          })

        })

      }
    },
  }
}
</script>
<style lang="less" scoped>

.home-content {
  width: 100%;
  height: 100%;
  /*overflow: hidden;*/

  .buttonClass {
    text-align: center;
    padding-top: 30px;
  }

  .el-container {
    width: 100%;
    height: 100%;

    .system-header {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #1890ff;
    }

    /deep/ .el-aside {
      height: 100%;
      background-color: #fff;

      .aside-header {
        width: 100%;
        height: 100px;
        color: #ffffff;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .el-main {
      background-color: #f0f2f5;
    }
  }
}
</style>
